<template>
	<view class="preview">
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :current="current" vertical @change="swiperChange">
			<swiper-item v-for="(item, index) in form.atthUrls" :key="index">
				<view class="wrapper">
					<image v-if="item.images_file_type == 'image'" class="img" :src="item.images_url" mode="aspectFit"></image>
					<video class="video" v-if="item.images_file_type == 'video' && index == current" autoplay :loop="true" :src="item.images_url" object-fit="contain"></video>
					<view class="info-wrap">
						<view class="info-top">
							<text>{{ form.workName }}</text>
							<text>{{ form.salary }}</text>
						</view>
						<view class="info-desc">
							{{ form.remark }}                        
						</view>
						<view class="info-time">
							开工时间：{{ form.startTime }}
						</view>
						<view class="btn-box">
							<u-button shape="circle" size="medium" type="error" :custom-style="customStyle" @click="placeOrder">接单<span class="txt">（无需要支付押金）</span></u-button>
							<u-button shape="circle" size="medium" type="error" :custom-style="customStyle" @click="checkMore">发布/查看更多工作</u-button>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: 'preview',
		data() {
			return {
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				current: 0,
				customStyle: {
					'padding': '0 20rpx'
				},
				form: {
					id: '',
					workName: '',
					remark: ' ',
					salary: '',
					startTime: '',
					atthUrls: [],
				}
			}
		},
		onLoad(e) {
			this.form.id = e.id;
			this.current = e.index;
			this.queryDetail();
		},
		methods: {
			queryDetail() { // 明细
				let params = {
					id: this.form.id
				}
				this.$u.api.postGetActivityInfo(params).then(res => {
					if(res.status == true) {
						let data = res.data;
						if(data) {
							this.form.workName = data.recruit_type_work;
							this.form.remark = data.recruit_requirement;
							this.form.salary = data.recruit_salary;
							this.form.startTime = data.recruit_start_time;
							this.form.atthUrls = data.recruit_pic;
						}
					}
				})
			},
			placeOrder() { // 接单
				let token = uni.getStorageSync('token');
				if(token) {
					let params = {
						id: this.form.id
					}
					this.$u.api.postReceiving(params).then(res => {
						if (res.code == 1000) {
							uni.navigateTo({
								url: '/pages/order/pay-deposit?id=' + res.data.id + '&deposit=' + res.data.deposit
							})
						}
					})
				}else {
					uni.redirectTo({
						url: '/pages/login'
					})
				}
			},
			checkMore() { // 查看更多工作
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			swiperChange(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.preview {
		width: 100vw;
		height: 100vh;
		background: #000;
		.swiper {
			height: 100vh;
			.wrapper {
				position: relative;
				width: 100%;
				height: 100%;
				.img {
					width: 100%;
					height: 100%;
				}
				.video {
					width: 100%;
					height: calc(100% - 320rpx);
				}
				.info-wrap {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					padding: 20rpx 30rpx;
					color: #fff;
					background: rgba(0,0,0,.4);
					.info-top {
						display: flex;
						justify-content: space-between;
						font-size: 24rpx;
						font-weight: bold;
						line-height: 30px;
					}
					.info-desc {
						font-size: 22rpx;
						font-weight: 500;
						line-height: 30rpx;
						height: 64rpx;
						overflow:hidden;//一定要写
						text-overflow: ellipsis;//超出省略号
						display:-webkit-box;//一定要写
						-webkit-line-clamp: 2;//控制行数
						-webkit-box-orient: vertical;//一定要写
					}
					.info-time {
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 10rpx;
					}
					.btn-box {
						display: flex;
						justify-content: space-between;
						margin-top: 20rpx;
						.txt {
							font-size: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
